<template>
  <curd-component :config="config" ref="RefTestComponent"></curd-component>

  <a-modal v-model:visible="visible" :title="isAdd?'新增':'编辑'" @ok="handleOk">
    <a-form :model="formState">
      <a-form-item label="用户名">
        <a-input v-model:value="formState.username"/>
      </a-form-item>
      <a-form-item label="密码" v-if="isAdd">
        <a-input v-model:value="formState.password"/>
      </a-form-item>
      <a-form-item label="邮件">
        <a-input v-model:value="formState.email"/>
      </a-form-item>
      <a-form-item label="城市">
        <a-input v-model:value="formState.city"/>
      </a-form-item>
      <a-form-item label="城市">
        <a-checkbox-group v-model:value="formState.roles">
          <a-checkbox :value="item.id" v-for="item in rolesList">{{ item.name }}</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
    </a-form>
  </a-modal>

  <a-modal v-model:visible="visible1" title="分配" @ok="fp">
    <a-checkbox-group v-model:value="checkedKeys" style="width: 100%">
      <div v-for="item in menus">
        <a-checkbox :value="item.id">{{ item.name }}</a-checkbox>
        <div v-for="item1 in item.children">
          --
          <a-checkbox :value="item1.id">{{ item1.name }}</a-checkbox>
          <div v-for="item2 in item1.children">
            ----
            <a-checkbox :value="item2.id">{{ item2.name }}</a-checkbox>
          </div>
        </div>

      </div>
    </a-checkbox-group>
    <!--    <a-tree
            :defaultExpandAll="true"
            v-model:selectedKeys="selectedKeys"
            v-model:checkedKeys="checkedKeys"
            checkable
            :tree-data="menus"
            :field-names="fieldNames"
        >
   </a-tree>-->
  </a-modal>

</template>

<script lang="ts">
import CurdComponent from "@/components/CurdComponent.vue";
import {message, TreeProps} from 'ant-design-vue';
import {CurdBaseInterface} from "@/plugs/interface";
import {defineComponent, ref, provide, UnwrapRef, reactive, toRefs, watch} from "vue";
import {
  getRole,
  adduser,
  getRoles,
  exportUser,
  delUser,
  updateUser,
  getMenus,
  getMenulist,
  getRoleMenus,
  editRoleMenus
} from "@/http/mockTest";

const cache = {
  username: '',
  password: '',
  email: '',
  city: '',
  roles: [],
}

export default defineComponent({
  setup() {
    const RefTestComponent: any = ref(null)
    const State: any = reactive({
      rolesList: [],
      formState: JSON.parse(JSON.stringify(cache)),
      menus: [],
      curObj: {}
    });
    const visible = ref<boolean>(false);
    const visible1 = ref<boolean>(false);
    const selectedKeys = ref<number[]>([1]);
    const checkedKeys = ref<number[]>([1]);

    const isAdd = ref<number>(1);


    const sendGrandson = function (a: any) {
      console.log(a)
    }

    const fieldNames: TreeProps['fieldNames'] = {
      children: 'children',
      title: 'name',
      key: "id"
    };
    provide('addBtn', sendGrandson)


    const fpRoleFn = async (data) => {
      visible1.value = true

      State.curObj = data
      let cc: any = await getMenus()
      State.menus = cc
      let cc1: any = await getRoleMenus(data.id)
      checkedKeys.value = cc1

    }

    const add = () => {
      isAdd.value = 1
      State.formState = JSON.parse(JSON.stringify(cache))
      visible.value = true
    }

    const editFn = (data) => {
      isAdd.value = 0
      State.formState = data
      State.formState.roles = data.sysRoles.map(i => Number(i.roleId))
      visible.value = true
    }

    const fp = async () => {
      await editRoleMenus(State.curObj.id, checkedKeys.value)
      visible1.value = false

    }
    const handleOk = () => {

      if (isAdd.value) {
        adduser(State.formState).then(res => {
          message.info('添加成功');
          visible.value = false
          RefTestComponent.value.getData();
        })
      } else {
        updateUser(State.formState).then(res => {
          message.info('修改成功');
          visible.value = false
          RefTestComponent.value.getData();
        })
      }

    }


    getRoles().then((res: any) => {
      State.rolesList = res

    })


    watch(selectedKeys, () => {
      console.log('selectedKeys', selectedKeys);
    });
    watch(checkedKeys, () => {
      console.log('checkedKeys', checkedKeys);
    });


    const config: CurdBaseInterface = {
      filter: {
        item: [
          {
            label: "名称",
            type: "input",
            name: "name",
            defaultValue: "",
            placeholder: "请输入",
          }

        ],

      },
      table: {
        columns: [
          {
            title: "角色名",
            dataIndex: "name",
            key: "name",
          },
          {
            title: "code",
            dataIndex: "code",
            key: 'code',
          },
          {
            title: "备注",
            dataIndex: "remark",
            key: "remark",
          },

          {
            title: "操作",
            dataIndex: "action",
            key: "action",
          },
        ],
        http: getRole,
        otherFn: [{
          name: "分配权限",
          fn: fpRoleFn
        }],


      },
    };


    return {
      config,
      handleOk,
      visible,
      RefTestComponent,
      ...toRefs(State),
      fp,
      visible1,
      isAdd,
      selectedKeys,
      fieldNames,
      checkedKeys,
    };
  },
  components: {
    "curd-component": CurdComponent,
  },
});
</script>
